<template>
	<view class="contont" :style="{height:screenHeight+'px'}">
		<view class="rgba-back" :style="{height:screenHeight+'px'}">
			<view class="tabBer-back" :style="{paddingTop:statuHeight+'px'}" @click="iconsClick">
				<uni-icons type="back" size="30" color="#ffffff"></uni-icons>
				<view class="password-login" @click="passLogin">密码登录</view>
			</view>
			<view class="input-btn-login">
				<input 
					class="uni-input" 
					placeholder="输入手机号" 
					type="number"
					v-model="fromData.account"
					placeholder-class
					placeholder-style="font-size: 32rpx;font-family: Adobe Heiti Std;font-weight: normal;color: #ADADAD;"
				>
				</input>
				<view class="num-code">
					<input class="note-imput"
					placeholder="请输入验证码" 
					v-model="fromData.phoneCode"
					type="number"
					placeholder-class
					placeholder-style="font-size: 32rpx;font-family: Adobe Heiti Std;font-weight: normal;color: #ADADAD;"
					></input>
					<view class="get-code" @click="getSmsVerify" v-if="showbtn">{{code_ts}}</view>
					<view class="get-code" v-else>{{code_ts}}</view>
				</view>
				<view class="verify-input-code">
					<input class="verify"
					placeholder="请输入验证码" 
					placeholder-class
					v-model="fromData.imgCode"
					maxlength="4"
					@input="inputCode"
					placeholder-style="font-size: 32rpx;font-family: Adobe Heiti Std;font-weight: normal;color: #ADADAD;"
					></input>
					<view class="code">
						<image :src="base64Url" class="code-img"></image>
					</view>
					<view class="iconfont icons" @click="createCode()">&#xe6ca;</view>
				</view>
				<input class="uni-input"
				style="margin: 36rpx 0;"
				placeholder="请输入密码" 
				v-model="fromData.password"
				@input="inputCode"
				placeholder-class
				placeholder-style="font-size: 32rpx;font-family: Adobe Heiti Std;font-weight: normal;color: #ADADAD;"
				></input>
				<view class="right-away" @click="rightLogin">立即注册</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { pathToBase64, base64ToPath } from '@/components/mmmm-image-tools/index.js'
	import { $POST, $GET } from '../../network/api.js'
	import  md5  from '@/components/md5/md5.js' 
	export default {
		data() {
			return {
				code_ts: '获取验证码', //倒计时提示文字
				sec: 60, // 倒计时秒数
				showbtn: true, // 展示获取验证码或倒计时按钮判断
				fromSms: {
					mobile: "",
					mobileCountry: "CN",
					type: "REGISTER"
				},
				sendSms: "N",
				fromData: { // 注册参数
					account: '', // 用户登录账号
					imgCode: '', // 图形验证码
					password: '', // 密码
					clientType: 2, // 客户端类型：ios=1，安卓=2，未知=3
					countryCode: "+86", // 国家代号
					from:2, // 用户添加方式：后台创建=1，自行注册=2
					phone:'', // 手机号
					phoneCode: '' // 短信验证码
				},
				base64Url: "",
				screenHeight: uni.getSystemInfoSync().screenHeight, // 屏幕高度
				statuHeight: uni.getSystemInfoSync().statusBarHeight // 状态栏高度
			}
		},
		onLoad() {
			this.createCode()
		},
		onShow() {
		
		},
		methods:{
			// 密码登录
			passLogin() {
				uni.navigateTo({
				  url: '/pages/login/login'
				})
			},
			// 立即登录
			async rightLogin() {
				if (!this.verify()) {
				  return false
				}
				let obj= {
					account: this.fromData.account,
					imgCode:  this.fromData.imgCode,
					password: md5(this.fromData.password),
					clientType: "2",
					from:"2",
					countryCode: "86",
					phone: this.fromData.account,
					phoneCode: this.fromData.phoneCode
				}
				const res = await $POST('/boke-user/user/registe',obj)
				uni.navigateTo({
				   url: '/pages/login/login'
				})
				uni.showToast({title: "注册成功", icon:'none'})
			},
			// 验证码inpout事件
			inputCode(e) {
				if(!(/^[a-zA-Z0-9_]{1,}$/.test(e.detail.value))){
					uni.showToast({title: "只能输入字母与数字", icon:'none'})
					return false
				}
			},
			// 验证
			verify() {
				if (!this.fromData.account) {
					uni.showToast({title: "请输入手机号", icon:'none'})
					return false
				}
				if(!(/^1[3456789]\d{9}$/.test(this.fromData.account))){
					uni.showToast({ title: "手机号码不正确",	icon:'none'});     
					return false; 
				}
				if (!this.fromData.imgCode) {
					uni.showToast({title: "请输入验证码", icon:'none'})
					return false
				}
				if (!this.fromData.password) {
					uni.showToast({title: "请输入密码", icon:'none'})
					return false
				}
				return true
			},
			// 获取短信验证码
			getSmsVerify() {
				if (!this.fromData.account) {
					uni.showToast({title: "请输入手机号", icon:'none'})
					return false; 
				}
				this.getyzcode()
				this.fromSms.mobile = this.fromData.account
				// console.log("短信接口:",sms)
			 $GET('/boke-user/sms/changeSendSmsFlag',{sendSms:"N"}).then(res => {
				  $POST('/boke-user/sms/sendSms',this.fromSms).then(res => {
						this.fromData.phoneCode = "8888"
					})
			 })
			
			},
			// 60秒倒计时
			getyzcode () {
			  let timer = setInterval(() => {
					this.sec = this.sec-1
					this.code_ts = this.sec + 'S后重试'
					this.showbtn = false
					if (this.sec === 0) {
							clearInterval(timer)
							this.sec = 60
							this.code_ts = "获取验证码"
							this.showbtn = true
					}
				}, 1000)
			},
			// 返回上一页
			iconsClick() {
				uni.navigateTo({
				  url: '/pages/login/preposition'
				})
			},
			async createCode() {
				const vm = this
				const res = await	$GET('/boke-user/user/getImgCode')
				base64ToPath(res.data.img).then(path => {
					vm.base64Url = path
					console.log("验证码数据：",vm.base64Url)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{
		padding:0;
		margin: 0;
		box-sizing: border-box;
	}
	.contont{
		background: url("~@/static/login/login_back.jpg");
		background-repeat:no-repeat; 
		 background-size:100% 100%;
		 -moz-background-size:100% 100%;
		 .rgba-back{
			 	background: rgba(49,49,49,0.6);
			 .tabBer-back{
			 	height: 88rpx;
			 	line-height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 30rpx;
				.password-login{
					font-size: 28rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #F6F6F6;
				}
			 }
			 .input-btn-login{
			 	padding-top: 170rpx;
			 	display: flex;
			 	flex-direction: column;
			 	justify-content: center;
			 	align-items: center;
			 	.uni-input{
			 		width: 638rpx;
			 		height: 96rpx;
			 		background: rgba(93, 87, 83,0.5);
			 		border-radius: 48rpx;
			 		line-height: 48px;
			 		padding-left: 46rpx;
					color: #FFFFFF;
					box-sizing:border-box;
			 		/deep/ .input-placeholder{
			 			font-size: 32rpx;
			 			font-family: Adobe Heiti Std;
			 			font-weight: normal;
			 			color: #ADADAD;
						
			 		}
			 	}
				.num-code{
					width: 638rpx;
					height: 96rpx;
					background: rgba(94, 91, 90,0.5);
					border-radius: 48rpx;
					// line-height: 48px;
					margin: 36rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					.note-imput{
						width: 420rpx;
						height: 96rpx;
						line-height: 48px;
						padding-left: 37rpx;
						color: #FFFFFF;
						/deep/ .input-placeholder{
							font-size: 32rpx;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							color: #ADADAD;
						}
					}
					.get-code{
						margin-right: 5rpx;
						width: 181rpx;
						height: 89rpx;
						background: rgba(150, 150, 150,0.5);
						border-radius: 48rpx;
						line-height: 89rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #F6F6F6;
						text-align: center;
					}
				}
			 	.verify-input-code{
			 		display: flex;
			 		align-items: center;
			 		.verify{
			 			width: 302rpx;
			 			height: 96rpx;
			 			background: rgba(98, 98, 98,0.5);
			 			border-radius: 48rpx;
						line-height: 48px;
						padding-left: 25rpx;
						color: #FFFFFF;
			 			/deep/ .input-placeholder{
			 				font-size: 32rpx;
			 				font-family: Adobe Heiti Std;
			 				font-weight: normal;
			 				color: #ADADAD;
			 			}
			 		}
			 		.code{
			 			width: 227rpx;
			 			height: 96rpx;
			 			border-radius: 10rpx;
			 			margin: 0 26rpx 0 50rpx;
						position: relative;
						.code-img{
							width: 100%;
							height: 100%;
						}
						.code-text{
							position: absolute;
							top: 0;
							right: 0;
							bottom: 0;
							left: 0;
							font-size: 56rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #43483A;
							line-height: 48px;
							text-align: center;
						}
			 		}
			 		.iconfont{
			 			color: #ADADAD;
			 		}
			 	}
				.right-away{
					width: 638rpx;
					height: 96rpx;
					border-radius: 48rpx;
					background: rgba(146, 146, 146,0.5);
					line-height: 96rpx;
					text-align: center;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #F6F6F6;
					margin-top: 39rpx;
					box-sizing: border-box;
				}
			 }
		 }
	}
	
</style>
